<template>
	<view class="guide_detail">
		<view class="guide_detail_title">
			{{ guideDetail.piTitle || '--' }}
		</view>
		<view class="guide_detail_cont">
			<view class="guide_detail_cont_time">
				<text class="publishDate">{{ guideDetail.publishDate || '--'}}</text>
				<text class="deptName">
					{{ guideDetail.deptName || '--' }}
				</text>
			</view>
			<!-- <view class="guide_detail_cont_code">
				<text>{{ guideDetail.piCode || '--'}}</text>
			</view> -->
		</view>
		<view class="guide_detail_content">
			<rich-text v-if="guideDetail.piContent" class="guide_detail_content_html" :nodes="repairRichText(guideDetail.piContent)" style="width: 100%;word-wrap: break-word;"></rich-text>
		</view>
		<view class="guide_detail_files" v-if="guideDetail.files && guideDetail.files.length > 0">
			<view class="guide_detail_files_title">附件：</view>
			<view class="guide_detail_files_list">
				<view class="guide_detail_files_list_item" v-for="(item,index) in guideDetail.files" :key="index" @click="fileview(item)">
					{{ item.originalName }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import { getGuideDetail } from '@/api/qss/index.js';

/* 获取详情 */
const guideDetail = ref({})
function getDetail(id) {
	getGuideDetail(id).then(res => {
		guideDetail.value = res.data
	})
}

const repairRichText = (html) => {
  // 去掉<img>中style /width / height属性
  let newContent = html.replace(/<img[^>]*>/gi, (match) => {
    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
    match = match.replace(/style\s*=\s*(["'])(?:(?!\1).)*\1/gi, '') // 去除 style=""这样的属性
    return match
  })
  // img标签添加style属性：max-width:100%;height:auto
  newContent = newContent.replace(/\<img/gi,
    '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
  )
  return newContent;
}


//查看文件
function fileview(file) {
	console.log(file)
	const { ossId, originalName } = file
    let url = `https://qsc.exbim.com/corp/prod-api/overview/download/${ossId}`
	console.log(url)
	uni.showLoading({
		title: '下载中...',
		mask: true
	})
	//下载文件流
	uni.request({
		url: url,
		method: 'get',
		responseType: 'arraybuffer',
		success: res => {
			console.log('wend', res);
			if (res.statusCode === 200) {
				//文件管理器
				const fs = uni.getFileSystemManager();
				// 文件名
				const filePath =`${wx.env.USER_DATA_PATH}/${originalName}`

				fs.writeFile({
					filePath: filePath,
					data: res.data,
					encoding: "binary",
					success: (res1) => {
						console.log('写入文档成功', res1);
						uni.hideLoading()
				
						uni.openDocument({
							showMenu: true,
							filePath: filePath,
							success: function(res2) {
								console.log('打开文档成功');
							},
							fail: err => {
								console.log('fail 1', err);
							}
						});
					},
					fail: err => {
						uni.hideLoading()
						uni.showToast({
							title: '文档下载失败',
							icon: 'none'
						})
						console.log('fail', err);
					}
				})
			}
		},
		fail: err => {
			uni.hideLoading()
			uni.showToast({
				title: '文档下载失败',
				icon: 'none'
			})
		}
	})
}


onLoad((option)=>{
	if(option.id){
		getDetail(option.id)
	}
})

</script>

<style lang="scss" scoped>
.guide_detail {
	padding: 0 32rpx;
	&_title {
		font-size: 36rpx;
		font-weight: 600;
		color: #101010;
		line-height: 50rpx;
		margin-top: 32rpx;
	}
	&_cont {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-content: center;
		margin-top: 32rpx;
		border-bottom: 2rpx solid #f5f5f5;
		color: #888888;

		&_time {
			width: 100%;
			display: flex;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 40rpx;
			.publishDate{
				// width:160rpx
			}
			.deptName{
				flex: 1;
				margin-left: 20rpx;
				text-align: right;
			}
		}
		// &_code {
		// 	width: 50%;
		// 	font-size: 28rpx;
		// 	font-weight: 400;
		// 	text-align: right;
		// }
	}
	&_content {
		margin-top: 32rpx;
		&_html {
			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
			
		}
	}
	&_files {
		margin-top: 32rpx;
		padding-bottom: 32rpx;
		&_title {
			font-size: 28rpx;
			font-weight: 600;
			color: #101010;
			line-height: 40rpx;
		}
		&_list {
			margin-top: 16rpx;
			&_item {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #0076E8;
				margin-top: 16rpx;
				border-radius: 4px;
				background-color: rgba(241, 243, 247, 1);
				padding: 0 20rpx;
				box-sizing: border-box;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				&:first-child {
					margin-top: 0;
				}
			}
		}
	}
}
</style>